<template>
  <a-card :bordered="false" :style="{ marginTop: '12px',height:'513px'}">
    <span slot="title"> <a-icon type="tags" style="color:#3393FC;margin-right:5px" theme="filled"/>我的计划</span>
    <a slot="extra" @click="loadMore('plan')">更多</a>
    <template>
      <FullCalendar
        ref="baseCalendar"
        selectable="true"
        weekNumberCalculation="ISO"
        :locale="locale"
        :firstDay="firstDay"
        :header="header"
        :plugins="calendarPlugins"
        :default-view="currentView"
        :buttonText="buttonText"
        :events="calendarEventsNew"
        :fixedWeekCount="fixedWeekCount"
        :showNonCurrentDates="showNonCurrentDates"
        :eventLimit="1"
        :contentHeight="300"
        :allDayText="allDayText"
        @datesRender="datesRender"
        @eventClick="handleEventSelected"
        @select="select"
      ></FullCalendar>
    </template>
    <!-- 弹窗区域 -->
    <eoa-plan-modal ref="baseModal" @ok="handleModalOk"/>
  </a-card>
</template>

<script>
  import EoaPlanModal from './EoaPlanModal'
  import { CalendarMixin } from './utils/CalendarMixin'
  import FullCalendar from '@fullcalendar/vue'

  export default {
    name: 'EoaCmsPlan',
    mixins: [CalendarMixin],
    components: {
      FullCalendar,
      EoaPlanModal
    },
    data () {
      return {
        planData: [],
        selectDay: {},
        header: {
          left: 'prev,next',
          center: 'title',
          right: 'dayGridMonth'
        }
      }
    },
    
    methods: {
      // handleModalOk() {
      //   this.initSiteInfo()
      // },
      loadMore(type) {
        this.$router.push({ path: '/oa/planList' })
      },
      addPlan() {
        console.log('addPlan', this.selectDay);
        this.$refs.baseModal.edit({ startTime: this.selectDay, endTime: this.selectDay, allDay: false }, '新增日程计划')
      }
    }
  }
</script>

<style scoped>

</style>
